<template>
  <div class="login_body">
    <div class="bg" />
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <el-form ref="formLogin" :model="formData" :rules="formRules">
        <el-form-item
          label="账号"
          prop="username"
        >
          <el-input v-model="formData.username"/>
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="formData.password"/>
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="remenberMe">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api/user'
export default {
  name: 'Login',
  data(){
    return{
      formData:{
        username:'',
        password:''
      },
      remenberMe:true,
      formRules:{
        username:[
          // 每一条规则对应一个对象
          {required:true,message:'请输入用户名',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'}
        ]
      }
    }
  },
  created(){
      const localData=localStorage.getItem('form_key')
      if(localData){
        this.formData.username=JSON.parse(localData).username

        this.formData.password=JSON.parse(localData).password
      }

  },

  methods:{
    login(){
      // console.log(this.$refs)
      this.$refs.formLogin.validate(async(flag)=>{
          if(!flag) return
          // console.log('校验成功，开始登陆')
        //  const res= await loginAPI(this.formData)
        //  console.log(res)
        try{
          // 试着运行语句，如果语句运行成功则继续执行该语句，如果有错误就会触发catch语句捕获错误
          await this.$store.dispatch('user/loginAction',this.formData)
          if(this.remenberMe){
            // 把账号和密码存起来
            // JSON.stringify:把对象转化为字符串
            localStorage.setItem('form_key',JSON.stringify(this.formData))
          }else{
            localStorage.removeItem('form_key')
          }

          // 获得当前页面的url地址中的参数
          // console.log(this.$route.query)
          if(this.$route.query.redirect){
            this.$router.push(this.$route.query.redirect)
          }else{
            this.$router.push('/')
          }

        }
        catch(err){
            console.dir(err)
            this.$message.error(err.response.data.msg)
            // console.log(this)
        }



      })
    }
  }

}

</script>

<style scoped lang="scss">
  .login_body {
    display: flex;
  }
  .bg {
    width: 60vw;
    height: 100vh;
    background: url('~@/assets/login-bg.svg') no-repeat;
    background-position: right top;
    background-size: cover;
  }
  .box {
    margin: 200px 10% 0;
    flex: 1;
    .title {
      padding-bottom: 76px;
      font-size: 26px;
      font-weight: 500;
      color: #1e2023;
    }
    ::v-deep() {
      .ant-form-item {
        display: flex;
        margin-bottom: 62px;
        flex-direction: column;
      }
      .ant-form-item-label label {
        font-size: 16px;
        color: #8b929d;
      }
      .ant-input,
      .ant-input-password {
        border-radius: 8px;
      }
    }
  }
  .login_btn{
    width: 100%;
  }
</style>
